<template id='Index'>
  <div class="Index">
    <top-bar :isClick="isClick" />
    <div class="main">
      <div id="path1" class="path1">
        <div class="title1"></div>
        <div class="slogan1">
          A metaverse game publishing platform similar to Steam in the future
        </div>
        <div class="btnBar">
          <div class="connect">
            <div class="conBg"></div>
          </div>
          <div class="buy" @click="goToByToken">
            <div class="buyBg"></div>
          </div>
        </div>
        <div class="linkBar">
          <b-img
            :src="item.icon"
            fluid
            alt="Responsive image"
            v-for="(item, index) in iconList"
            :key="index"
            @click="linkTo(item)"
          ></b-img>
        </div>
        <!-- <div class="text1">{{ text1 }}</div> -->
      </div>
      <div id="path2" class="path2">
        <div class="title2">
          <div class="title2BlueText"></div>
          <div class="title2Text"></div>
          <div class="point3"></div>
        </div>
        <div class="text2">
          <div
            class="textContent"
            v-for="(item, index) in pathTwoList"
            :key="index"
          >
            <div class="point2"></div>
            <span>{{ item.content }}</span>
          </div>
        </div>
      </div>
      <div id="path3" class="path3">
        <div class="title3">
          <div class="title3BlueText"></div>
          <div class="title3Text"></div>
          <div class="point3"></div>
        </div>
        <div class="text3">
          <div class="text3Content">{{ platformText }}</div>
          <div class="down"></div>
        </div>
        <div class="link3">
          <div
            @click="linkToPlatform(item)"
            class="linkItem"
            v-for="(item, index) in platformList"
            :key="index"
          >
            <div
              class="linkIconBg"
              :class="{ isClick: platformClick == index }"
            >
              <b-img :src="item.icon" fluid></b-img>
            </div>
            <div class="linkTitle">{{ item.title }}</div>
            <div class="linkContent">{{ item.content }}</div>
          </div>
        </div>
      </div>
      <div id="path4" class="path4">
        <div class="title4">
          <div class="title4Content"></div>
          <div class="title4Line"></div>
        </div>
        <ul class="list4">
          <li v-for="(item, index) in pathFourList" :key="index" class="text4">
            <div class="text4Title">
              <div class="circular"></div>
              {{ item.title }}
            </div>
            <div class="text4Desc">{{ item.desc }}</div>
          </li>
        </ul>
      </div>
      <div id="path5" class="path5">
        <div class="title5">
          <div class="title5Content"></div>
          <div class="title5Line"></div>
        </div>
        <div class="text5">{{ path5.text5 }}</div>
        <div class="link5">
          <div class="leftPath">
            <b-img :src="path5.leftPath.icon" fluid></b-img>
            <div class="paht5title">{{ path5.leftPath.title }}</div>
            <div class="path5Content">{{ path5.leftPath.desc }}</div>
          </div>
          <div class="rightPath">
            <b-img :src="path5.rightPath.icon" fluid></b-img>
            <div class="paht5title">{{ path5.rightPath.title }}</div>
            <div class="path5Content">{{ path5.rightPath.desc }}</div>
          </div>
        </div>
      </div>
      <div id="path6" class="path6">
        <div
          class="pathItem"
          v-for="(item, index) in path6List"
          :key="index"
          :class="{ isClick: index == currentYear }"
        >
          <div class="path6Title" @click="toNextYear(index)">
            <b-img :src="item.icon" fluid></b-img>
          </div>
          <div class="path6Content">
            <div
              class="path6Desc"
              v-for="(element, location) in item.monthList"
              :key="location"
            >
              <div class="month">
                <div class="circular"></div>
                {{ element.date }}
              </div>
              <div class="desc">{{ element.desc }}</div>
            </div>
          </div>
        </div>
      </div>
      <div id="path7" class="path7">
        <div class="title7">
          <div class="title7Text"></div>
          <div class="title7Line"></div>
        </div>
        <div class="path7Content">
          <div
            class="supportType"
            v-for="(item, index) in parttnersList"
            :key="index"
          >
            <div
              class="supportItem"
              v-for="(element, location) in item.list"
              :key="location"
              @click="goToParttner(element)"
            >
              <b-img :src="element.img" fluid></b-img>
            </div>
          </div>
        </div>
      </div>
    </div>
    <bottom-bar />
  </div>
</template>

<script>
import TopBar from "../../components/TopBar.vue";
import BottomBar from "../../components/BottomBar.vue";
import { getParttnersApi } from "../../assets/api/index";
import { iscode } from "../../tools/index";
export default {
  name: "Index",
  components: {
    TopBar,
    BottomBar,
  },
  data() {
    return {
      currentYear: -1,
      isClick: 1,
      iconList: [
        {
          icon: require("../../assets/images/index/plane.png"),
          path: "https://t.me/gmatrixsofficial",
        },
        {
          icon: require("../../assets/images/index/twitter.png"),
          path: "https://twitter.com/Gmatrixs1",
        },
        {
          icon: require("../../assets/images/index/message.png"),
          path: "https://discord.com/invite/7277cV8XmH",
        },
        {
          icon: require("../../assets/images/index/gitHub.png"),
          path: "https://github.com/Gmatrixs-inc/",
        },
        {
          icon: require("../../assets/images/index/gitBook.jpg"),
          path: "https://market-gms.gitbook.io/gmatrixs/",
        },
      ],
      text1:
        "Stand-alone Chains Accelerate Game Ecology Middleware Energizes the Reform of Chain Game",
      pathTwoList: [
        {
          content:
            "Gmatrixs is the first omni-chain game release platform on Ethereum, with independently developed middleware and stand-alone chain products. By providing traditional game developers with one touch",
        },
        {
          content:
            "SDK access functions and stand-alone chain access service, thus greatly reducing the difficulty of the development of blockchain games, so it can facilitate the rapid access of games to the Gmatrixs platform.",
        },
      ],
      platformClick: 0,
      platformText:
        "In addition, the stand-alone chain supports Ethereum Virtual Machines (EVM) in its own verifier pool to share Ethereum security. In general, it applies to the verifier pool that can be completely decentralized and secure. Based on Ethereum, Gmatrixs has built a modular, universal and flexible blockchain game framework to provide support for middleware technology, release of game assets, transaction of game props, traffic ecology sharing, asset trading on the chain, platform arena and other functions.",
      platformList: [
        {
          icon: require("../../assets/images/index/speciality.png"),
          title: "speciality",
          content: "The most professional development team",
          id: 0,
        },
        {
          icon: require("../../assets/images/index/safety.png"),
          title: "safety",
          content:
            "Dedicated to user virtual currency account security considerations",
          id: 1,
        },
        {
          icon: require("../../assets/images/index/fast.png"),
          title: "Fast",
          content: "Create faster block chain network applications",
          id: 2,
        },
      ],
      pathFourList: [
        {
          title: "About SDK",
          desc: "The abbreviation for middleware is SDK. The SDK provided by GMS includes user wallets, blockchain browser interfaces, authentication signatures, anti-cheat modules, Websockets and events, Solidity + Ethereum  Virtual Machines, transfer gateway integration, and more functions.",
        },
        {
          title: "SDK Technical Description",
          desc: "Middleware is an independent system software or service program that distributed applications use to share resources between different technologies. The benefits of Gmatrixs SDK middleware to game applications are not only simple access, shorten access cycle, but also provide chain maintenance, contract writing and resource management. The SDK interface provided by Gmatrixs allows developers to quickly develop blockchain-based games.",
        },
      ],
      path5: {
        text5:
          "Gmatrixs provides technical and innovative solutions to game development companies.",
        leftPath: {
          icon: require("../../assets/images/index/bg5LeftIcon.png"),
          title: "SDK multi-chain integration",
          desc: "The SDK integration multiple chains provide by GMS(ETH/BSC/HECO) uses the same procedure of access from ftraditional SDK,thus no additional learning costs.",
        },
        rightPath: {
          icon: require("../../assets/images/index/bg5RightIcon.png"),
          title: "Decentralized server framework",
          desc: "The decentralized server framework specifically designed for games can not only satisfy individual developers and small game development teams to produce games, but also provide mature large-scale game development and operation solutions for professional game companies.",
        },
      },
      path6List: [
        {
          icon: require("../../assets/images/index/2020.png"),
          monthList: [
            {
              date: "July 2020",
              desc: "Start the concept of Gmatrixs platform, and demonstrate the development route of Gmatrixs concept and business plan.",
            },
            {
              date: "September 2020",
              desc: "Gmatrixs team was set up and synchronously open the development of SDK.",
            },
          ],
        },
        {
          icon: require("../../assets/images/index/2021.png"),
          monthList: [
            {
              date: "June 2021",
              desc: "Basically completed the technical development and test of middleware and SDK for game asset release, and started the platform system test.",
            },
            {
              date: "2021 Q3",
              desc: "Gmatrixs platform EVM version was launched, and opened the source code. Finish the publishment of Gmatrixs technical documents and SDK. The team prepared the launch of the platform Token $GMS.",
            },
            {
              date: "2021 Q4",
              desc: "Gmatrixs platform officially launched. The SDK Demo version test and the SDK cooperation with game team will start.",
            },
          ],
        },
        {
          icon: require("../../assets/images/index/2022.png"),
          monthList: [
            {
              date: "2022 Q1",
              desc: "It will gradually support mainstream public chains such as SOL, AVAX, FTM, Polkadot, and LUNA.",
            },
            {
              date: "2022 Q2",
              desc: "Gmatrixs platform Stand-alone Chain development will be completed, and open each game project to Stand-alone Chain migration. Improve the SDK functions and API interface. The platform's own game development will be completed and launched.",
            },
            {
              date: "2022 Q3：",
              desc: "The Gmatrixs platform has officially joined the metaverse. Gmatrixs will establish an integrated player, Game Miner, Token Trader and NFT Collector chain game user ecosystem.",
            },
          ],
        },
        {
          icon: require("../../assets/images/index/moreYear.png"),
        },
      ],
      parttnersList: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    linkTo(item) {
      if (item.path) {
        window.location.href = item.path;
      }
    },
    linkToPlatform(item) {
      this.platformClick = item.id;
    },
    toNextYear(index) {
      if (index == 3) {
        if (this.currentYear <= 1) {
          this.currentYear++;
        } else {
          this.currentYear = -1;
        }
      }
    },
    async getParttners() {
      let result = await getParttnersApi();
      if (iscode(result)) {
        this.parttnersList = result.data.parttnersList;
      }
    },
    goToParttner(item) {
      if (item.path) {
        window.location.href = item.path;
      }
    },
    goToByToken() {
      this.$router.push("/byToken");
    },
  },

  created() {},

  mounted() {
    this.getParttners();
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>

<style lang='less' scoped>
.Index {
  background-color: #000;
  .main {
    user-select: none;
    .path1 {
      padding: 0 244px;
      background: url("../../assets/images/index/bg1.jpg");
      background-size: 100% 100%;
      width: 100%;
      height: 1081px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .title1 {
        background: url("../../assets/images/index/title1.png");
        background-size: 100% 100%;
        width: 725px;
        height: 319px;
        margin-top: 300px;
      }
      .slogan1 {
        font-size: 29px;
        color: #fff;
        font-weight: bold;
        text-align: center;
        // background: url("../../assets/images/index/slogan1.png");
        // background-size: 100% 100%;
        // width: 673px;
        // height: 30px;
        margin-top: 80px;
        margin-bottom: 142px;
      }
      .btnBar {
        margin-bottom: 47px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        display: none;
        .connect {
          cursor: pointer;
          width: 448px;
          height: 60px;
          background-color: #438dee;
          border-radius: 10px;
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          .conBg {
            background: url("../../assets/images/index/connect.png");
            background-size: 100% 100%;
            width: 299px;
            height: 30px;
          }
        }
        .connect:hover,
        .buy:hover {
          -webkit-animation: leftblink 1.2s infinite both;
          animation: leftblink 1.2s infinite both;
          @-webkit-keyframes leftblink {
            0% {
              opacity: 1;
            }
            50% {
              opacity: 0.2;
            }
            100% {
              opacity: 1;
            }
          }
          @keyframes leftblink {
            0% {
              opacity: 1;
            }
            50% {
              opacity: 0.2;
            }
            100% {
              opacity: 1;
            }
          }
        }
        .buy {
          cursor: pointer;
          width: 448px;
          height: 60px;
          border-radius: 10px;
          border: 3px solid #438dee;
          display: flex;
          align-items: center;
          justify-content: center;
          .buyBg {
            background: url("../../assets/images/index/buyToken.png");
            background-size: 100% 100%;
            width: 179px;
            height: 30px;
          }
        }
      }
      .linkBar {
        margin-bottom: 41px;
        display: flex;
        align-items: center;
        img {
          width: 27px;
          height: 27px;
          margin-left: 44px;
          cursor: pointer;
        }
        img:nth-child(5) {
          width: 42px;
          height: 42px;
        }
        img:hover {
          -webkit-animation: slide-in-bck-center 0.75s
            cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
          animation: slide-in-bck-center 1s cubic-bezier(0.25, 0.46, 0.45, 0.94)
            both;
          @-webkit-keyframes slide-in-bck-center {
            0% {
              -webkit-transform: translateZ(600px);
              transform: scale(3);
              opacity: 0;
            }
            100% {
              -webkit-transform: translateZ(0);
              transform: scale(1);
              opacity: 1;
            }
          }
          @keyframes slide-in-bck-center {
            0% {
              -webkit-transform: translateZ(600px);
              transform: scale(3);
              opacity: 0;
            }
            100% {
              -webkit-transform: translateZ(0);
              transform: scale(1);
              opacity: 1;
            }
          }
        }
      }
      .text1 {
        text-align: center;
        font-size: 26px;
        color: #ffffff;
        width: 600px;
        margin-bottom: 75px;
      }
    }
    .path2 {
      padding: 0 244px;
      background: url("../../assets/images/index/bg2.jpg");
      background-size: 100% 100%;
      width: 100%;
      height: 1081px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .title2 {
        margin-top: 45px;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        margin-bottom: 210px;
        .title2BlueText {
          background: url("../../assets/images/index/path2Title.png");
          background-size: 100% 100%;
          width: 1062px;
          height: 166px;
        }
        .title2Text {
          background: url("../../assets/images/index/about.png");
          background-size: 100% 100%;
          width: 1137px;
          height: 142px;
          margin-top: -30px;
        }
        .point3 {
          background: url("../../assets/images/index/point3.png");
          background-size: 100% 100%;
          width: 75px;
          height: 39px;
        }
      }
      .text2 {
        .textContent {
          margin-bottom: 54px;
          display: flex;
          flex-direction: column;
          justify-items: center;
          align-items: center;
          text-align: center;
          .point2 {
            background: url("../../assets/images/index/point2.png");
            background-size: 100% 100%;
            width: 52px;
            height: 31px;
            margin-bottom: 19px;
          }
          span {
            font-size: 24px;
            color: #ffffff;
            line-height: 1.8;
          }
        }
      }
    }
    .path3 {
      padding: 0 244px;
      background-color: #000;
      width: 100%;
      height: 1081px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .title3 {
        margin-top: 65px;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        margin-bottom: 70px;
        .title3BlueText {
          background: url("../../assets/images/index/platform.png");
          background-size: 100% 100%;
          width: 690px;
          height: 166px;
        }
        .title3Text {
          background: url("../../assets/images/index/path3Title.png");
          background-size: 100% 100%;
          width: 1137px;
          height: 142px;
          margin-top: -30px;
        }
        .point3 {
          background: url("../../assets/images/index/point3.png");
          background-size: 100% 100%;
          width: 75px;
          height: 39px;
        }
      }
      .text3 {
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        margin-bottom: 67px;
        .text3Content {
          font-size: 24px;
          color: #ffffff;
          line-height: 1.8;
          text-align: center;
        }
        .down {
          margin-top: 30px;
          width: 24px;
          height: 14px;
          background: url("../../assets/images/index/down.png");
          background-size: 100% 100%;
          -webkit-animation: shake-vertical 5s
            cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
          animation: shake-vertical 5s cubic-bezier(0.455, 0.03, 0.515, 0.955)
            infinite both;
          @-webkit-keyframes shake-vertical {
            0%,
            100% {
              -webkit-transform: translateY(0);
              transform: translateY(0);
            }
            10%,
            30%,
            50%,
            70% {
              -webkit-transform: translateY(-8px);
              transform: translateY(-8px);
            }
            20%,
            40%,
            60% {
              -webkit-transform: translateY(8px);
              transform: translateY(8px);
            }
            80% {
              -webkit-transform: translateY(6.4px);
              transform: translateY(6.4px);
            }
            90% {
              -webkit-transform: translateY(-6.4px);
              transform: translateY(-6.4px);
            }
          }
          @keyframes shake-vertical {
            0%,
            100% {
              -webkit-transform: translateY(0);
              transform: translateY(0);
            }
            10%,
            30%,
            50%,
            70% {
              -webkit-transform: translateY(-8px);
              transform: translateY(-8px);
            }
            20%,
            40%,
            60% {
              -webkit-transform: translateY(8px);
              transform: translateY(8px);
            }
            80% {
              -webkit-transform: translateY(6.4px);
              transform: translateY(6.4px);
            }
            90% {
              -webkit-transform: translateY(-6.4px);
              transform: translateY(-6.4px);
            }
          }
        }
      }
      .link3 {
        display: flex;
        align-items: flex-start;
        justify-content: space-around;
        padding: 0 157px;
        width: 100%;
        .linkItem {
          user-select: none;
          cursor: pointer;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 293px;
          .linkIconBg {
            background: #3b3b3b;
            border-radius: 50%;
            width: 95px;
            height: 95px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 29px;
            img {
              width: 30px;
              height: 36px;
            }
          }
          .linkIconBg:hover {
            -webkit-animation: pulsate-bck 1.5s ease-in-out infinite both;
            animation: pulsate-bck 1.5s ease-in-out infinite both;
            background: linear-gradient(180deg, #f7f7f7 0%, #438dee 100%);
            box-shadow: 0px 3px 20px #438dee;
            @-webkit-keyframes pulsate-bck {
              0% {
                -webkit-transform: scale(1);
                transform: scale(1);
              }
              50% {
                -webkit-transform: scale(0.9);
                transform: scale(0.9);
              }
              100% {
                -webkit-transform: scale(1);
                transform: scale(1);
              }
            }
            @keyframes pulsate-bck {
              0% {
                -webkit-transform: scale(1);
                transform: scale(1);
              }
              50% {
                -webkit-transform: scale(0.9);
                transform: scale(0.9);
              }
              100% {
                -webkit-transform: scale(1);
                transform: scale(1);
              }
            }
          }
          .isClick {
            background: linear-gradient(180deg, #f7f7f7 0%, #438dee 100%);
            box-shadow: 0px 3px 20px #438dee;
            border-radius: 50%;
          }
          .linkTitle {
            font-size: 26px;
            color: #ffffff;
            font-weight: 800;
            margin-bottom: 24px;
          }
          .linkContent {
            font-weight: 400;
            font-size: 20px;
            color: #ffffff;
            text-align: center;
          }
        }
      }
    }
    .path4 {
      padding: 0 244px;
      background: url("../../assets/images/index/bg4.png");
      background-size: 100% 100%;
      width: 100%;
      height: 1081px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .title4 {
        margin-top: 173px;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: flex-start;
        margin-bottom: 50px;
        width: 100%;
        .title4Content {
          background: url("../../assets/images/index/title4.png");
          background-size: 100% 100%;
          width: 1296px;
          height: 61px;
          margin-bottom: 70px;
        }
        .title4Line {
          width: 182px;
          height: 10px;
          background: #ffffff;
        }
      }
      .list4 {
        padding: 0;
        // width: 1296px;
      }
      .text4 {
        margin-bottom: 46px;
        .circular {
          width: 17px;
          height: 17px;
          background: #ffffff;
          border-radius: 50%;
          margin-right: 20px;
        }
        .text4Title {
          display: flex;
          align-items: center;
          font-size: 32px;
          font-weight: 800;
          color: #ffffff;
          margin-bottom: 23px;
        }
        .text4Desc {
          margin-left: 40px;
          font-size: 20px;
          font-weight: 500;
          color: #ffffff;
          line-height: 40px;
        }
      }
    }
    .path5 {
      padding: 0 244px;
      background-color: #000;
      width: 100%;
      height: 1081px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .title5 {
        margin-top: 152px;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        margin-bottom: 50px;
        .title5Content {
          background: url("../../assets/images/index/title4.png");
          background-size: 100% 100%;
          width: 1296px;
          height: 61px;
          margin-bottom: 70px;
        }
        .title5Line {
          width: 182px;
          height: 10px;
          background: #438dee;
        }
      }
      .text5 {
        font-size: 20px;
        font-weight: 500;
        color: #ffffff;
        text-align: center;
        margin-bottom: 54px;
      }
      .link5 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .leftPath {
          width: 567px;
          height: 546px;
          background: #ffffff;
          border: 4px solid #438dee;
          box-shadow: 0px 3px 75px rgba(67, 141, 238, 0.51);
          opacity: 1;
          border-radius: 16px;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-right: 69px;
          .img-fluid {
            width: 72px;
            height: 72px;
            margin-top: 60px;
            margin-bottom: 50px;
            // animation: turn 5s linear infinite;
            // @keyframes turn {
            //   0% {
            //     -webkit-transform: rotate(0deg);
            //   }
            //   100% {
            //     -webkit-transform: rotate(360deg);
            //   }
            // }
          }
          .paht5title {
            font-size: 25px;
            color: #438dee;
            font-weight: 800;
            margin-bottom: 50px;
          }
          .path5Content {
            font-size: 20px;
            color: #438dee;
            font-weight: 500;
            line-height: 40px;
            width: 506px;
            text-align: center;
          }
        }
        .leftPath:hover {
          -webkit-animation: shadow-white 2s ease-in-out infinite both;
          animation: shadow-white 2s ease-in-out infinite both;
          @-webkit-keyframes shadow-white {
            0%,
            100% {
              -webkit-box-shadow: 0px 0px 40px #438dee;
              box-shadow: 0px 0px 40px #438dee;
            }
            50% {
              -webkit-box-shadow: 0px 0px 0px #fff;
              box-shadow: 0px 0px 0px #fff;
            }
          }
          @keyframes shadow-white {
            0%,
            100% {
              -webkit-box-shadow: 0px 0px 40px #438dee;
              box-shadow: 0px 0px 40px #438dee;
            }
            50% {
              -webkit-box-shadow: 0px 0px 0px #fff;
              box-shadow: 0px 0px 0px #fff;
            }
          }
        }
        .rightPath {
          width: 567px;
          height: 546px;
          background: #438dee;
          box-shadow: 0px 3px 83px rgba(255, 255, 255, 0.26);
          opacity: 1;
          border-radius: 16px;
          display: flex;
          flex-direction: column;
          align-items: center;
          .img-fluid {
            width: 72px;
            height: 72px;
            margin-top: 60px;
            margin-bottom: 50px;
            // animation: turn 5s linear infinite;
            // @keyframes turn {
            //   0% {
            //     -webkit-transform: rotate(0deg);
            //   }
            //   100% {
            //     -webkit-transform: rotate(360deg);
            //   }
            // }
          }
          .paht5title {
            font-size: 25px;
            color: #fff;
            font-weight: 800;
            margin-bottom: 50px;
          }
          .path5Content {
            font-size: 20px;
            color: #fff;
            font-weight: 500;
            line-height: 40px;
            width: 506px;
            text-align: center;
          }
        }
        .rightPath:hover {
          -webkit-animation: shadow-out 2s ease-in-out infinite both;
          animation: shadow-out 2s ease-in-out infinite both;
          @-webkit-keyframes shadow-out {
            0%,
            100% {
              -webkit-box-shadow: 0px 0px 40px #fff;
              box-shadow: 0px 0px 40px #fff;
            }
            50% {
              -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75);
              box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75);
            }
          }
          @keyframes shadow-out {
            0%,
            100% {
              -webkit-box-shadow: 0px 0px 40px #fff;
              box-shadow: 0px 0px 40px #fff;
            }
            50% {
              -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75);
              box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75);
            }
          }
        }
      }
    }
    .path6 {
      padding: 0 244px;
      background: url("../../assets/images/index/bg6.png");
      background-size: 100% 100%;
      width: 100%;
      height: 1081px;
      display: flex;
      align-items: center;
      justify-content: center;
      .pathItem {
        user-select: none;
        flex: 1;
        height: 1081px;
        background-color: rgba(255, 255, 255, 0.75);
        padding-top: 52px;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: -10px 3px 20px rgba(0, 0, 0, 0.16);
        .path6Title {
          margin-bottom: 50px;
          img {
            width: 208px;
            height: 83px;
          }
        }

        .path6Content {
          .path6Desc {
            padding-left: 48px;
            .month {
              font-weight: 800;
              font-size: 25px;
              color: #000000;
              display: flex;
              align-items: center;
              line-height: 40px;
              border-left: 1px dashed #438dee;
              .circular {
                width: 15px;
                height: 15px;
                background: #438dee;
                box-shadow: 0px 3px 6px #438dee;
                border-radius: 50%;
                margin-right: 16px;
                margin-left: -7.5px;
              }
            }
            .desc {
              font-weight: 500;
              font-size: 16px;
              color: #000000;
              line-height: 30px;
              border-left: 1px dashed #438dee;
              padding: 24px 16px 35px 16px;
            }
          }
          .path6Desc:first-child {
            .month {
              border-left: none;
              margin-bottom: -12px;
            }
            .desc {
              padding-bottom: 47px;
            }
          }
          .path6Desc:last-child {
            .month {
              border-left: none;
              margin-top: -12px;
            }
            .desc {
              border-left: none;
            }
          }
        }
      }
      .isClick {
        background-color: rgba(255, 255, 255, 1);
        -webkit-animation: shadow-drop-2-center 0.4s
          cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        animation: shadow-drop-2-center 0.4s
          cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        @-webkit-keyframes shadow-drop-2-center {
          0% {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
          }
          100% {
            -webkit-transform: translateZ(100px);
            transform: translateZ(100px);
            -webkit-box-shadow: 0 0 40px 0px rgba(0, 0, 0, 1);
            box-shadow: 0 0 40px 0px rgba(0, 0, 0, 1);
          }
        }
        @keyframes shadow-drop-2-center {
          0% {
            -webkit-transform: translateX(0) translateY(0) translateZ(0);
            transform: translateX(0) translateY(0) translateZ(0);
            -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
          }
          100% {
            -webkit-transform: translateX(8px) translateY(8px) translateZ(8px);
            transform: translateX(8px) translateY(-8px) translateZ(8px);
            -webkit-box-shadow: 0 0 50px 0px rgba(0, 0, 0, 1);
            box-shadow: 0 0 50px 0px rgba(0, 0, 0, 1);
          }
        }
      }

      .pathItem:last-child {
        opacity: 0.66;
        img {
          width: 32px;
          height: 59px;
        }
        .path6Title {
          cursor: pointer;
          animation: shake-horizontal 5s linear infinite both;
          @keyframes shake-horizontal {
            0%,
            100% {
              -webkit-transform: translateX(0);
              transform: translateX(0);
            }
            10%,
            30%,
            50%,
            70% {
              -webkit-transform: translateX(-10px);
              transform: translateX(-10px);
            }
            20%,
            40%,
            60% {
              -webkit-transform: translateX(10px);
              transform: translateX(10px);
            }
            80% {
              -webkit-transform: translateX(8px);
              transform: translateX(8px);
            }
            90% {
              -webkit-transform: translateX(-8px);
              transform: translateX(-8px);
            }
          }
        }
      }
    }
    .path7 {
      padding: 0 244px;
      background: url("../../assets/images/index/bg7.png");
      background-size: 100% 100%;
      width: 100%;
      min-height: 1081px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 244px;
      .title7 {
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        margin-bottom: 98px;
        margin-top: 180px;
        .title7Text {
          background: url("../../assets/images/index/title7.png");
          background-size: 100% 100%;
          width: 761px;
          height: 61px;
          margin-bottom: 85px;
        }
        .title7Line {
          width: 182px;
          height: 10px;
          background: #438dee;
        }
      }
      .path7Content {
        display: flex;
        flex-flow: wrap;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        .supportType {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          .supportItem {
            cursor: pointer;
            margin-right: 26px;
            margin-bottom: 26px;
            width: 248px;
            height: 130px;
            background-color: #1e1e1e;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              width: 163px;
              height: 67px;
            }
          }
          .supportItem:nth-child(6n) {
            margin-right: 0;
          }
        }

        // .supportItem:hover {
        //   background: #fff;
        //   -webkit-animation: flip-vertical-right 3s ease both;
        //   animation: flip-vertical-right 3s ease both;
        //   @-webkit-keyframes flip-vertical-right {
        //     0% {
        //       -webkit-transform: rotateY(0);
        //       transform: rotateY(0);
        //     }
        //     100% {
        //       -webkit-transform: rotateY(360deg);
        //       transform: rotateY(360deg);
        //     }
        //   }
        //   @keyframes flip-vertical-right {
        //     0% {
        //       -webkit-transform: rotateY(0);
        //       transform: rotateY(0);
        //     }
        //     100% {
        //       -webkit-transform: rotateY(360deg);
        //       transform: rotateY(360deg);
        //     }
        //   }
        // }
      }
    }
  }
}
@media screen and (max-width: 480px) {
  .Index {
    // height: 100%;
    .main {
      .path1 {
        background: url("../../assets/images/index/bg1_phone.jpg");
        background-size: 100% 100%;
        width: 100%;
        // height: 960px;
        padding: 0 40px;
        .text1 {
          width: 100%;
        }
        .slogan1 {
          font-size: 34px;
        }
      }
      .path2 {
        padding: 0 40px;
        .title2 {
          margin-bottom: 140px;
          .title2BlueText {
            width: 708px;
            height: 110px;
          }
          .title2Text {
            width: 758px;
            height: 94px;
          }
        }
        .text2 {
          .textContent {
            span {
              font-size: 30px;
            }
          }
        }
      }
      .path3 {
        padding: 0 40px;
        height: auto;
        .title3 {
          .title3BlueText {
            width: 460px;
            height: 110px;
          }
          .title3Text {
            width: 758px;
            height: 94px;
          }
        }
        .text3 {
          .text3Content {
            font-size: 30px;
          }
        }
        .link3 {
          padding: 0;
          margin-bottom: 67px;
          .linkItem {
            .linkTitle {
              font-size: 32px;
            }
            .linkContent {
              font-size: 26px;
            }
          }
        }
      }
      .path4 {
        padding: 0 40px;
        height: auto;
        .title4 {
          .title4Content {
            width: 810px;
            height: 38px;
          }
        }
        .text4 {
          .text4Title {
            font-size: 37px;
          }
          .text4Desc {
            font-size: 26px;
          }
        }
      }
      .path5 {
        padding: 0 40px;
        height: auto;
        .title5 {
          .title5Content {
            width: 810px;
            height: 38px;
          }
        }
        .link5 {
          flex-direction: column;
          width: 100%;
          .leftPath {
            width: 100%;
            margin-right: 0;
            height: 450px;
            margin-bottom: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .img-fluid {
              margin: 20px 0;
            }
            .paht5title {
              margin-bottom: 20px;
              font-size: 31px;
            }
            .path5Content {
              width: 100%;
              padding: 0 40px;
              margin-bottom: 20px;
              font-size: 26px;
            }
          }
          .rightPath {
            width: 100%;
            margin-bottom: 40px;
            height: 450px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .img-fluid {
              margin: 20px 0;
            }
            .paht5title {
              margin-bottom: 20px;
              font-size: 31px;
            }
            .path5Content {
              width: 100%;
              padding: 0 40px;
              margin-bottom: 20px;
              font-size: 26px;
            }
          }
        }
        .text5 {
          font-size: 26px;
        }
      }
      .path6 {
        padding: 0 40px;
        height: auto;
        .pathItem {
          min-height: 1551px;
          padding-bottom: 52px;
          .path6Content {
            .path6Desc {
              .month {
                font-size: 31px;
              }
              .desc {
                font-size: 21px;
              }
            }
          }
        }
        .pathItem:not(:last-child):hover {
          background-color: rgba(255, 255, 255, 1);
          -webkit-animation: shadow-drop-2-center 0.4s
            cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
          animation: shadow-drop-2-center 0.4s
            cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
          @-webkit-keyframes shadow-drop-2-center {
            0% {
              -webkit-transform: translateZ(0);
              transform: translateZ(0);
              -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
              box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            }
            100% {
              -webkit-transform: translateZ(100px);
              transform: translateZ(100px);
              -webkit-box-shadow: 0 0 40px 0px rgba(0, 0, 0, 1);
              box-shadow: 0 0 40px 0px rgba(0, 0, 0, 1);
            }
          }
          @keyframes shadow-drop-2-center {
            0% {
              -webkit-transform: translateX(0) translateY(0) translateZ(0);
              transform: translateX(0) translateY(0) translateZ(0);
              -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
              box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            }
            100% {
              -webkit-transform: translateX(8px) translateY(8px) translateZ(8px);
              transform: translateX(8px) translateY(-8px) translateZ(8px);
              -webkit-box-shadow: 0 0 50px 0px rgba(0, 0, 0, 1);
              box-shadow: 0 0 50px 0px rgba(0, 0, 0, 1);
            }
          }
        }
        .pathItem:last-child {
          display: none;
        }
      }
      .path7 {
        padding: 0 40px;
        min-height: 900px;
        height: auto;
        .title7 {
          .title7Text {
            width: 507px;
            height: 40px;
          }
        }
        .path7Content {
          .supportType {
            justify-content: flex-start;
            .supportItem {
              margin-right: 30px;
              margin-bottom: 46px;
            }
            .supportItem:nth-child(3n) {
              margin-right: 0px;
            }
          }
        }
      }
    }
  }
}
</style>